<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <info title="我的待办" value="8个任务" :bordered="true" />
        </a-col>
        <a-col :sm="8" :xs="24">
          <info title="本周任务平均处理时间" value="32分钟" :bordered="true" />
        </a-col>
        <a-col :sm="8" :xs="24">
          <info title="本周完成任务数" value="24个" />
        </a-col>
      </a-row>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="标准列表">
      <template #extra>
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
          <a-radio-button value="processing">进行中</a-radio-button>
          <a-radio-button value="waiting">等待中</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px" />
      </template>

      <div class="operate">
        <a-button type="dashed" style="width: 100%" @click="add"
          ><plus-outlined />添加</a-button
        >
      </div>

      <a-list
        size="large"
        :pagination="{
          showSizeChanger: true,
          showQuickJumper: true,
          pageSize: 5,
          total: 50,
        }"
      >
        <a-list-item :key="index" v-for="(item, index) in data">
          <a-list-item-meta :description="item.description">
            <template #avatar>
              <a-avatar size="large" shape="square" :src="item.avatar" />
            </template>
            <template #title>
              <a>{{ item.title }}</a>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a @click="edit(item)">编辑</a>
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item><a>编辑</a></a-menu-item>
                  <a-menu-item><a>删除</a></a-menu-item>
                </a-menu>
              </template>
              <a>更多<down-outlined /></a>
            </a-dropdown>
          </template>

          <div class="list-content">
            <div class="list-content-item">
              <span>Owner</span>
              <p>{{ item.owner }}</p>
            </div>
            <div class="list-content-item">
              <span>开始时间</span>
              <p>{{ item.startAt }}</p>
            </div>
            <div class="list-content-item">
              <a-progress
                :percent="item.progress.value"
                :status="!item.progress.status ? null : item.progress.status"
                style="width: 180px"
              />
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </page-header-wrapper>
</template>

<script lang="ts">
import { getCurrentInstance, defineComponent, reactive } from "vue";
// 演示如何使用 $dialog 封装 modal 组件
import TaskForm from "./modules/TaskForm.vue";
import Info from "./components/Info.vue";

interface DataType {
  title: string;
  avatar: string;
  description: string;
  owner: string;
  startAt: string;
  progress: {
    status?: string;
    value: number;
  };
}

export default defineComponent({
  name: "StandardList",
  components: {
    TaskForm,
    Info,
  },
  setup() {
    const instance = getCurrentInstance();
    const proxy = instance?.proxy;

    const data = reactive(<DataType[]>[]);
    data.push({
      title: "Alipay",
      avatar:
        "https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png",
      description: "那是一种内在的东西， 他们到达不了，也无法触及的",
      owner: "付晓晓",
      startAt: "2018-07-26 22:44",
      progress: {
        value: 90,
      },
    });
    data.push({
      title: "Angular",
      avatar:
        "https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png",
      description: "希望是一个好东西，也许是最好的，好东西是不会消亡的",
      owner: "曲丽丽",
      startAt: "2018-07-26 22:44",
      progress: {
        value: 54,
      },
    });
    data.push({
      title: "Ant Design",
      avatar:
        "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
      description: "生命就像一盒巧克力，结果往往出人意料",
      owner: "林东东",
      startAt: "2018-07-26 22:44",
      progress: {
        value: 66,
      },
    });
    data.push({
      title: "Ant Design Pro",
      avatar:
        "https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png",
      description: "城镇中有那么多的酒馆，她却偏偏走进了我的酒馆",
      owner: "周星星",
      startAt: "2018-07-26 22:44",
      progress: {
        value: 30,
      },
    });
    data.push({
      title: "Bootstrap",
      avatar:
        "https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png",
      description: "那时候我只会想自己想要什么，从不想自己拥有什么",
      owner: "吴加好",
      startAt: "2018-07-26 22:44",
      progress: {
        status: "exception",
        value: 100,
      },
    });

    const status = "all";
    const add = function () {
      proxy?.$dialog(
        TaskForm,
        // component props
        {
          record: {},
          onOk() {
            console.log("ok 回调");
          },
          onCancel() {
            console.log("cancel 回调");
          },
          onClose() {
            console.log("modal close 回调");
          },
        },
        // modal props
        {
          title: "新增",
          width: 700,
          centered: true,
          maskClosable: false,
        }
      );
    };
    const edit = function (record) {
      console.log("record", record);
      proxy?.$dialog(
        TaskForm,
        // component props
        {
          record,
          on: {
            ok() {
              console.log("ok 回调");
            },
            cancel() {
              console.log("cancel 回调");
            },
            close() {
              console.log("modal close 回调");
            },
          },
        },
        // modal props
        {
          title: "操作",
          width: 700,
          centered: true,
          maskClosable: false,
        }
      );
    };

    return {
      data,
      status,
      add,
      edit,
    };
  },
});
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
</style>
